<%@ page import="wang.dao.ThemeDao" %>
<%@ page import="wang.bean.Theme" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>猫途鹰旅游-管理端</title>
</head>
<body>
<jsp:include page="css.jsp"/>
<jsp:include page="header.jsp"/>
<%
    ThemeDao themeDao = new ThemeDao();
    List<Theme> themes = themeDao.list();
    session.setAttribute("themes", themes);
%>
<c:if test="${empty admin}">
    <script type="text/javascript">
        window.location.href = "login.jsp";
    </script>
</c:if>
<style type="text/css">
    .list-left {
        border-right: #eeeeee 1px solid;
    }

    .list-right {
        border-left: #eeeeee 1px solid;
    }

    .theme-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding-left: 12px;
        margin: 0 0 8px 12px;
        border-radius: .25rem;
        border: 1px solid #ccc;
    }
</style>

<c:if test="${!empty admin}">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 list-left">
                <button data-toggle="modal" data-target="#add-theme-model" type="button" class="btn btn-md btn-link">添加主题</button>
                <c:if test="${!empty themes}">
                    <c:forEach items="${themes}" var="theme" varStatus="ct">
                        <div class="theme-item">
                            <span>${theme.name}</span>
                            <div class="btn-group">
                                <a class="btn btn-md btn-link" onclick="updateTheme('${theme.id}', '${theme.name}')">编辑</a>
                                <a class="btn btn-md btn-link" onclick="deleteTheme('${theme.id}')">删除</a>
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
            <div class="col-md-10 list-right">
                <button type="button" class="btn btn-md btn-link" id="add-attraction-btn">添加景点</button>
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            序号
                        </th>
                        <th>
                            主题
                        </th>
                        <th>
                            景点名称
                        </th>
                        <th>
                            国家
                        </th>
                        <th>
                            地址
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:if test="${!empty touristAttractions}">
                        <c:forEach items="${touristAttractions}" var="touristAttraction" varStatus="vs">
                            <c:if test="${vs.count%2==0}">
                                <tr class="table-active">
                                    <td>${vs.count}</td>
                                    <td>${touristAttraction.theme}</td>
                                    <td>${touristAttraction.title}</td>
                                    <td>${touristAttraction.description}</td>
                                    <td>${touristAttraction.country}</td>
                                    <td>${touristAttraction.address}</td>
                                    <td><a href="updateView.ancientPainting?id=${touristAttraction.id}"/>修改|<a
                                            href="delete.ancientPainting?id=${touristAttraction.id}"/>删除
                                    </td>
                                </tr>
                            </c:if>
                            <c:if test="${vs.count%2!=0}">
                                <tr>
                                    <td>${vs.count}</td>
                                    <td>${touristAttraction.theme}</td>
                                    <td>${touristAttraction.title}</td>
                                    <td>${touristAttraction.description}</td>
                                    <td>${touristAttraction.country}</td>
                                    <td>${touristAttraction.address}</td>
                                    <td><a href="updateView.ancientPainting?id=${touristAttraction.id}"/>修改|<a
                                            href="delete.ancientPainting?id=${touristAttraction.id}"/>删除
                                    </td>
                                </tr>
                            </c:if>
                        </c:forEach>
                    </c:if>
                    <c:if test="${empty touristAttractions}">
                        <tr>
                            <td colspan="6">无</td>
                        </tr>
                    </c:if>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</c:if>

<%-- 主题模态框，在添加主题按钮上绑定data-target="#add-theme-model"，add-theme-model与该模态框的id对应 --%>
<div class="modal fade" id="add-theme-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加主题</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-theme-form" action="insert.theme" method="post">
                    <div class="form-group row login-container-field">
                        <label for="input-name" class="col-sm-2 col-form-label">主题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="input-name" name="name" placeholder="请输入主题名称" maxlength="20" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="add-theme-btn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<jsp:include page="footer.jsp"/>
<div class="modal fade" id="update-theme-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑主题</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="update-theme-form" action="update.theme" method="post">
                    <input type="text" class="form-control-plaintext" id="theme-update-id" name="id" style="display: none;">
                    <div class="form-group row login-container-field">
                        <label for="theme-update-name" class="col-sm-2 col-form-label">主题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="theme-update-name" name="name" placeholder="请输入主题名称" maxlength="20"
                                   required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="update-theme-btn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete-theme-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="delete-theme-form" action="delete.theme" method="post">
                    <input type="text" class="form-control-plaintext" id="theme-delete-id" name="id" style="display: none;">
                </form>
                <p>确认删除该主题吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="delete-theme-btn" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#add-theme-btn").click(function (event) {
            let name = $("#input-name").val();
            if (!name) {
                alert("请完善信息！");
                return;
            }
            $("#add-theme-form").submit();
        });

        $("#update-theme-btn").click(function (event) {
            let name = $("#theme-update-name").val();
            if (!name) {
                alert("请完善信息！");
                return;
            }
            $("#update-theme-form").submit();
        });

        $('#update-theme-model').on('hidden.bs.modal', function (event) {
            document.getElementById("update-theme-form").reset();
        });

        $('#add-theme-model').on('hidden.bs.modal', function (event) {
            document.getElementById("add-theme-form").reset();
        });

        $("#add-attraction-btn").click(function (event) {
            window.location.href = "admin_add_tourist_attraction.jsp";
        });

        $("#delete-theme-btn").click(function (event) {
            $("#delete-theme-form").submit();
        });

        $('#delete-theme-btn').on('hidden.bs.modal', function (event) {
            document.getElementById("delete-theme-form").reset();
        });
    });

    function updateTheme(id, name) {
        $("#theme-update-id").val(id);
        $("#theme-update-name").val(name);
        $('#update-theme-model').modal('show');
    }

    function deleteTheme(id) {
        $("#theme-delete-id").val(id);
        $('#delete-theme-model').modal('show');
    }
</script>
</html>